import React, { useState } from "react";
import { Form, Input, Button, Select, Divider, Space } from "antd";
import { useEffect } from "react";
export default function (props) {
  // ============================================== search =====================================================

  const [form] = Form.useForm();
//   const [formData, setFormData] = useState({
//     project: "LCA",
//     name: "",
//     classify: "",
//     keyWord: props.keyWord,
//   });

  const reset = () => {
    form.setFieldsValue({
        project: null,
    name: null,
    classify: null,
    keyWord: null,
    })
  }

  const onFinish = (values) => {
    console.log("form data:", form.getFieldsValue());
    console.log("Success:", values);
    console.log("content:", form.getFieldValue("content"));
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  const projectChange = (v) => {
    console.log(v);
  };

  useEffect(() => {
    form.setFieldValue("keyWord", props.keyWord);
  }, [props.keyWord]);

  return (
    <Form
      form={form}
      name="basic"
      layout="vertical"
    //   initialValues={formData}
      autoComplete="off"
    >
      <Form.Item label="Key Word" name="keyWord">
        <Input />
      </Form.Item>

      <Form.Item label="Project"  name="project">
        <Select
          style={{ width: "100%" }}
          onChange={projectChange}
          allowClear={true}
          options={[
            {
              value: "LCA",
              label: "LCA",
            },
            {
              value: "GDM",
              label: "GDM",
            },
            {
              value: "QDS",
              label: "QDS",
            },
          ]}
        />
      </Form.Item>

      <Form.Item label="Template Name" name="name">
        <Input />
      </Form.Item>

      <Form.Item label="Classify" name="classify">
        <Input />
      </Form.Item>
      <Divider></Divider>

      <Space style={{ width: "100%", justifyContent: "flex-end" }}>
        <Button
          type="primary"
          onClick={() => {
            props.callback(form.getFieldsValue());
          }}
        >
          Search
        </Button>
        <Button onClick={reset}>Reset</Button>
        <Button onClick={props.onClose}>Close</Button>
      </Space>

      {/* {props.children} */}
    </Form>
  );
}
